<template>
  <user-bg>
    <a-card class="register-panel">
      <div class="title">注册账号</div>
      <div class="content">
        <div class="register">
          <a-form layout="horizontal" ref="refsform" :model="form" :rules="rules">
            <a-form-item label="" name="username">
              <a-input v-model:value="form.username" placeholder="请输入手机号" shape="round" allow-clear autocomplete="off" :maxlength="11">
                <template #prefix>
                  <svg-icon name="tell" style="width: 12px; height: 12px"></svg-icon>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="" name="validcode">
              <a-input v-model:value="form.validcode" placeholder="请输入图形验证码" allow-clear autocomplete="off" :maxlength="50">
                <template #prefix>
                  <svg-icon name="validcode" style="width: 12px; height: 12px"></svg-icon>
                </template>
                <template #addonAfter>
                  <valid-code ref="refsValidCode" v-model:value="validCode" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="" name="verificationCode">
              <a-input-search v-model:value="form.verificationCode" placeholder="请输入短信验证码" allow-clear autocomplete="off" :maxlength="8" enter-button="获取验证码" @search="onSearch">
                <template #prefix>
                  <svg-icon name="sms" style="width: 12px; height: 12px"></svg-icon>
                </template>
              </a-input-search>
            </a-form-item>
            <a-form-item label="" name="password">
              <a-input-password v-model:value="form.password" placeholder="请输入密码" autocomplete="off" :maxlength="50">
                <template #prefix>
                  <svg-icon name="pwd" style="width: 12px; height: 12px"></svg-icon>
                </template>
              </a-input-password>
            </a-form-item>
          </a-form>
        </div>
        <a-button type="primary" :block="true" @click="toRegister">注册</a-button>
        <div class="login-panel">新用户，<span class="login" @click="toLogin">直接登录></span></div>
      </div>
    </a-card>
  </user-bg>
</template>

<script setup name="register">
import { ref, reactive } from 'vue'
import ValidCode from '@/components/Bussiness/ValidCode.vue'
import UserBg from '@/components/Bussiness/UserBg.vue'
import { ACCESS_TOKEN, LOGIN_PAGE_PATH } from '@/mutation-type'
import { webStorage } from '@/utils/webStorage'
import { useUserStore } from '@/store/user'
import { message } from 'ant-design-vue'
import router from '@/router'
import { register, sendLoginSms } from '@/api/authorize'

const refsform = ref(null)
const refsValidCode = ref(null)

const form = reactive({})
let validateValidCode = async (_rule, value) => {
  if (!value) {
    return Promise.reject('请输入图形验证码')
  } else {
    if (validCode.value !== value) {
      return Promise.reject('请输入正确的图形验证码')
    }
    return Promise.resolve()
  }
}
const rules = reactive({
  username: [
    { required: true, message: '请输入手机号', type: 'string', trigger: 'blur' },
    { pattern: /^1[3-9][0-9]{9}$/, message: '请输入正确的手机号' },
  ],
  validcode: [{ required: true, validator: validateValidCode, trigger: 'blur' }],
  verificationCode: [{ required: true, message: '请输入短信验证码', type: 'string', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', type: 'string', trigger: 'blur' },
    { pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/, message: '密码复杂度不达标，需要包含大小写字母、特殊符号、数字的三种，且介于6-50位之间。' },
  ],
})

const validCode = ref('')

const onSearch = async () => {
  await sendLoginSms(form.username)
}

const toLogin = () => {
  router.push(`/user`)
}

const toRegister = async () => {
  await refsform.value.validate()

  const params = { ...form, password1: form.password }
  delete params.validcode
  const res = await register(params)
  if (res.success) {
    message.success(res.msg)
    // let user = useUserStore()
    // let userInfo = { name: 'liaozhiyang', age: 18, sex: 'man' }
    // user.setUser(userInfo)
    // webStorage.ls.set(ACCESS_TOKEN, userInfo, 2 * 24 * 60 * 60 * 1000)
    router.push(LOGIN_PAGE_PATH)
  } else {
    message.error(res.msg)
  }
}
</script>

<style lang="less" scoped>
@import url('@/assets/style/authorize.less');
.register-panel {
  width: 340px;
  .title {
    display: flex;
    justify-content: center;

    font-size: 20px;
    font-family:
      PingFangSC-Regular,
      PingFang SC;
    // font-weight: 400;
    color: #222222;
    line-height: 30px;
    .item {
      flex-grow: 1;
      text-align: center;
    }
    .actived {
      color: #e1251b;
    }
    .split {
      align-self: center;
      height: 16px;
      width: 1px;
      background-color: silver;
    }
  }
  .content {
    display: flex;
    flex-flow: column nowrap;
    // height: 380px;
    padding: 20px 0;

    font-size: 14px;
    font-family:
      PingFangSC-Regular,
      PingFang SC;
    font-weight: 400;
    color: #222222;
    line-height: 22px;
    .register {
    }

    .login-panel {
      padding-top: 10px;
      text-align: right;
      .login {
        color: #e1251b;
        cursor: pointer;
      }
    }
  }
}
</style>
